我站原创视频教程,网上视频教程学校,仅需要一个耳机+远程即可完成所有教学任务。
题 目:怎么实现滑入滑出效果的弹出窗口
解决思路:
窗口滑入时的速度应该是渐慢,而滑出时的速度应该是渐快,速度渐变的原理可以参考本部分第三章的问题8(《怎么做随滚动条滚动而滚动的层》)
具体步骤:
1.父窗口代码:
<script>
//movwin滑动窗口句柄,posX,窗口在X轴上的初始值
//targetX,窗口的停留位置,step,窗口的移动步长
var movwin,posX,targetX,step
function newwin(url,w,h){
//打开宽为w,高为h的窗口
movwin=window.open(url,"demo","width="+w+",height="+h)
posX=-w //窗口在X轴上的初始值,在屏幕左边界之外
targetX=(screen.width-w)/2 //窗口的停留位置,在屏幕中央
step=(targetX-posX)/10 //窗口滑动的步长
//将窗口移动到X轴上的屏幕之外,Y轴上的中央
movwin.moveTo(posX,(screen.height-h)/2)
moveit() //调用滑动窗口的函数
}
function moveit(){
//如果弹出窗口未关闭且窗口未滑动至目标位置
if(!movwin.closed&&posX<targetX){
movwin.moveBy(step,0) //使窗口在X轴上移动step象素
posX+=step //更新窗口在X轴上的坐标值
setTimeout("moveit()",10) //10毫秒后再次执行moveit()函数
//重新计算步长值,以产生速度渐变的效果(越来越慢)
step=(targetX-posX)/10
}
}
</script>
<button onClick="newwin(’demo.htm’,100,100)">打开滑动窗口</button>
2.子窗口(demo.htm)代码:
<script>
var step=0.1 //窗口移动的步长值
var posX
function closeit(){
//窗口当前在X轴上的坐标值
posX=(screen.width-document.body.offsetWidth)/2
//如果窗口未滑动至屏幕之外,继续执行下面的代码
if(step+posX<screen.width) {
self.moveBy(step,0) //使窗口在X轴上移动step象素
step*=1.15 //重新计算步长值,以产生速度渐变效果(越来越快)
setTimeout("closeit()",10) //10毫秒后再次执行closeit()函数
}
else self.close() //如果窗口已经滑动至屏幕右边界,关闭窗口
}
</script>
<button onClick="closeit()">关闭滑动窗口</button>
3.滑入滑出窗口演示效果(在一个页中实现):
<script>
var movwin,targetX,step
function newwin(w,h){
movwin=window.open("","demo","width="+w+",height="+h)
movwin.document.write(subwin.innerHTML)
movwin.document.close()
targetX=(screen.width-w)/2
step=(targetX-movwin.screenLeft)/10
movwin.moveTo(-w,(screen.height-h)/2)
moveit()
}
function moveit(){
if(!movwin.closed&&movwin.screenLeft<targetX){
movwin.moveBy(step,0)
setTimeout("moveit()",10)
step=(targetX-movwin.screenLeft)/10
}
}
</script>
<button onClick="newwin(150,100)">打开滑动窗口</button>
<xmp style="display:none" id="subwin">
<script>
var step=0.1
function closeit(){
if(screenLeft<screen.width) {
step*=1.15
self.moveBy(step,0)
setTimeout("closeit()",10)
}
else self.close()
}
</script>
<button onClick="closeit()">关闭滑动窗口</button>
</xmp>
技巧:利用窗口对象的screenLeft和screenTop属性,还可以判断窗口的关闭、刷新或重定向操作。
<script event="onunload" for="window">
(this.screenLeft>=10000 && this.screenTop>=10000)?alert("Close"):alert("Refresh or Redirect")
</script>
特别提示
运行第3步的代码,单击【打开滑动窗口】按钮,将打开一个150×100大小的窗口,窗口先在屏幕左上角打开,然后立刻移动到屏幕之外,再以逐渐变慢的速度移动至屏幕中央。在单击【关闭滑动窗口】按钮后,滑动窗口将以一个在水平方向上逐渐变快的速度移出屏幕之外,然后自动关闭。
图1.5.18 滑入滑出的弹出窗口
特别说明
本例主要是窗口对象的moveTo、moveBy方法和screenLeft属性的应用。
screenLeft 获取浏览器客户区左上角相对于屏幕左上角的 x 坐标。
screenTop 获取浏览器客户区左上角相对于屏幕左上角的 y 坐标。
省级FLASH课件制作培训请加我站管理QQ444860709 培训QQ专业群67042004。
FLASH8.0教程→ flash cs3视频教程 flashcs3教程 flash cs3教程下载 flashcs3视频教程 flash cs3 pro教程 flash cs3教程网 flash cs3 实例教程 flashcs3教程下载 flash cs3教程 pdf flash cs3按钮教程
|